<template>
	<view>
		<view class="bartop"></view>
		<view class="cu-bar">
			<view class="action">
				<text class="cuIcon-back text-gray" @tap="goBack()"></text> 返回
			</view>
			<view class="text-lg text-bold">
				梅兰款
			</view>
			<view class="action">
				<text class="text-lg" style="color: #13227a;" @tap="createProduct()">新建</text>
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item" @tap="contractNoDetail()">
				<text>2明下</text>
				<view class="item">
					<text class="text-purple" @tap.stop="changeProduct(0)">修改</text>
					<text class="text-red margin-left-sm" @tap.stop="deleteProduct(0)">删除</text>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Create' || modalName == 'Change' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content" v-if="modalName=='Create'">新建产品</view>
					<view class="content" v-if="modalName=='Change'">修改产品</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input placeholder="请输入产品名字" type="text" :value="operatorName">
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-purple" @tap="hideModal">取消</button>
						<button class="cu-btn bg-purple margin-left" @tap="hideModal">确定</button>

					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Delete'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">是否删除该产品？</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-purple solid-left" @tap="hideModal">取消</view>
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				operatorName: '',
			}
		},
		methods: {

			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			createProduct() {
				this.operatorName = ''
				this.modalName = "Create"
			},
			changeProduct() {
				this.operatorName = '2明下'
				this.modalName = "Change"
			},
			deleteProduct() {
				this.modalName = 'Delete'
			}
		}
	}
</script>

<style>

</style>
